<template>
  <div class="add">
    <StatusTip v-if="pageTip.show" :status="pageTip.status"></StatusTip>
    <div v-else class="content">
      <div class="flowBox">
        <flow ref="flowRef" :treeData="flatTreeData" name="enterpriseName" id="id"></flow>
        <Tree
          v-if="treeVisible"
          class="treeCompones"
          parentId="parentId"
          name="enterpriseName"
          children="children"
          id="id"
          :treeData="resData"
          :title="'选择摄像头'"
          @onChecked="handleChecked"
          @onSelected="handleSelected"
          @onClose="handleTreeClose"
          :style="treeStyle"
        ></Tree>
      </div>
      <fill class="fillComponent"></fill>
    </div>
  </div>
</template>

<script setup name="patrol">
  import Tree from '@/views/Device/components/tree/index.vue';
  import fill from './components/fill/index.vue';
  import flow from './components/flow/index.vue';
  import StatusTip from '@/components/StatusTip/index.vue';
  import res from '@/views/Device/components/tree/data';
  import { ref, reactive, onMounted, watch } from 'vue';
  import bus from '@/utils/mitt';
  const pageTip = reactive({
    show: true,
    status: 0
  });
  const treeVisible = ref(false);
  const flowRef = ref(null);
  const treeStyle = ref(null);
  let resData = [];
  let flatTreeData = [];
  let nodeIndex = -1;
  /** 监听tree组件关闭*/
  const handleTreeClose = () => {
    treeVisible.value = false;
  };
  /** 监听tree组件选中*/
  const handleSelected = keys => {
    let findItem = flatTreeData.find(item => item['id'] == keys[0]);
    bus.emit(`selected-${nodeIndex}`, findItem);
    treeVisible.value = false;
  };
  const handleChecked = () => {};
  /** */
  bus.on('showTree', index => {
    treeVisible.value = true;
    nodeIndex = index;
  });
  /** 扁平化数据 */
  const generateFlat = (data, _children) => {
    const arr = [];
    for (let i = 0; i < data.length; i++) {
      const node = data[i];
      if (node[_children]) {
        let result = generateFlat(node[_children]);
        arr.push(...result);
      } else {
        arr.push(node);
      }
    }
    return arr;
  };
  /**dom渲染完成设置tree组件的位置 */
  watch(
    () => flowRef.value,
    () => {
      const react = flowRef.value.elem.getBoundingClientRect();
      treeStyle.value = { left: `${react.right + 20}px`, top: `${react.top}px`, height: `${react.height}px` };
    }
  );

  setTimeout(() => {
    pageTip.show = true;
    let { code, data } = res;
    if (code == 200) {
      if (data?.length) {
        flatTreeData = generateFlat(data, 'children');
        resData = data;
        pageTip.show = false;
      } else {
        pageTip.status = 1;
      }
    } else {
      pageTip.status = 2;
    }
  }, 100);
</script>

<style lang="less" scoped>
  .add {
    padding: 16px 24px;
    height: 100%;
    background: url('@/assets/image/dot.svg');
    background-size: 18px 18px;
    .content {
      height: 100%;
      display: flex;
    }
    .flowBox {
      flex: 1;
      margin-right: 16px;
      display: flex;
      justify-content: center;
      position: relative;
      overflow: auto;
      .treeCompones {
        position: fixed;
        width: 240px;
      }
    }
    .fillComponent {
      width: 300px;
    }
  }
</style>
